<!-- 克隆快照 -->
<template>
  <div>
    <a-modal 
      v-model="modalVisible" 
      @ok='handleCloneSnap'
      @cancel="handleCancel"
      :maskClosable="false"
      :width="450"
      v-dragModal
    >
      <template slot="title">
        <span v-if="$store.state.language=='zh'">克隆快照</span>
        <span v-else>Snapshot Rollback</span>
      </template>

      <a-form :form='form'>
        <a-form-item :label="$t('Clone')+'from'+$t('Snap')"  v-bind='formlayout'>
          <a-input :value="targetBlock ? targetBlock.pool_name +'/'+ targetBlock.name : ''" disabled></a-input>
        </a-form-item>
        <!-- 新快设备名 -->
        <a-form-item :label="$t('New')+$t('Block-name')" v-bind='formlayout'>
          <a-input v-decorator="['replica_block',{
                rules:[{required:true,message:$t('Choose')+$t('New')+$t('Block-name')},
                {pattern:namePattern,message:$t('Not_enter_special_characters')}]
            }]" ></a-input>
        </a-form-item>
        <!-- 存储池名 -->
        <a-form-item :label="$t('Pool')+$t('Name')" v-bind="formlayout">
            <a-select v-decorator="['replica_pool',{
                rules:[{required:true,message:$t('Choose')+$t('Pool')+$t('Name')}]
            }]">
                <!-- <a-select-option v-for="(item,index) in $store.state.baseblock.rbd_pool" :value='item' :key="index"> -->
              <a-select-option v-for="item in $store.state.baseblock" :value='item.poolnum' :key="item.poolname">
                  {{item.poolname}}
              </a-select-option>
            </a-select>
        </a-form-item>
        <!--专用数据存储池-->
        <!-- <a-form-item v-bind="formlayout">
            <a-row>
                <a-col :span='14' :offset='10'>
                    <a-checkbox @change="onChange" :checked="check" v-decorator="['special']">
                       {{$t('Use')}}{{$t('Dedicated')}}
                    </a-checkbox>
                </a-col>
            </a-row>
        </a-form-item>
        <a-form-item :label="$t('Data-pool')" v-bind="formlayout" v-if='check'>
            <a-select v-decorator="['replica_data_pool',{
                rules:[{required:true,message:$t('Choose')+$t('Data-pool')}]
            }]">
                <a-select-option v-for="(item,index) in $store.state.baseblock.data_pool" :value='item' :key="index">
                    {{item}}
                </a-select-option>  
            </a-select>
        </a-form-item> -->
        <a-form-item :label="$t('Block-size')" v-bind='formlayout'>
          <a-row>
            <a-col :span='12'>
              <!-- required:true,message:$t('Enter')+$t('Block-size') -->
              <a-form-item>
                <a-input-number
                  v-decorator="['size',{
                    rules:[{}],initialValue:oldSize
                  }]" disabled>
                </a-input-number>
              </a-form-item>
            </a-col>
            <a-col :span='12'>
              <!-- required:true,message:$t('Choose')+'unit' -->
              <a-form-item>
                <a-select
                  v-decorator="['unit',{
                    rules:[{}],initialValue:oldUnit
                  }]" disabled>
                  <a-select-option v-for='u in uint' :key='u.val'>{{u.label}}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form-item>
      </a-form>

      <template slot="footer">
        <a-button @click="handleCancel" class="submit-btn">
          {{$t('Cancel')}}
        </a-button>
        <a-button class="submit-btn" type="primary" @click="handleCloneSnap" :loading="submitLoading" >
          {{$t('Sure')}}
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "RollBackSnap",
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    targetSnapshot: {
      type: Object,
      required: true
    },
    targetBlock: {
      type: Object,
      required: true,
      default: () => { return {} }
    }
  },

  data() {
    return {
      modalVisible: false,
      submitLoading: false,
      form: this.$form.createForm(this),
      formlayout: {
        labelCol: {span:7},
        wrapperCol: {span:16}
      },
      uint:[{val:'KiB',label:'KiB'},{val:'MiB',label:'MiB'},{val:'GiB',label:'GiB'},{val:'TiB',label:'TiB'}],
      oldUnit:'',
      oldSize:'',
    }
  },

  watch: {
    visible(newValue) {
      this.modalVisible = newValue;
      this.getSizeAndUnit();
    }
  },

  methods: {
    // 克隆快照
    handleCloneSnap() {
      this.form.validateFields(async (err,value)=>{
        if(!err){
          this.submitLoading = true;
          const params = {
            src_pool_id: this.targetBlock.pool_id, //原块设备的池id
            src_image_id: this.targetBlock.id, //原块设备id
            snapshot_id: this.targetSnapshot.snap_id, //快照编号
            dest_image_name: value.replica_block, //克隆后的名称
            dest_pool_id: value.replica_pool, //所属存储池
            old_pool_name: this.targetBlock.pool_name,  //原池名
            old_block_name: this.targetBlock.name, //原块设备名
            snapshot_name: this.targetSnapshot.snap //原快照名
          };
          try {
            const res = await this.$api.blockInfo.cloneSnapRequest(params);
            if(res && res.data) {
              this.model(res.data.id) //返回模板
              this.notice(res.data.id,res.data.params,res.data.flag) //通知列表显示
              this.$emit('updateInfo');
            }
          }catch {
            this.handleCancel();
          }
          this.handleCancel();
        }
      })
    },

    //关闭弹窗
    handleCancel() {
      this.$emit('closeOperationModal', 'clone-snap');
      this.submitLoading = false;
      this.form.resetFields();
    },

    // 对数值和单位划分
    getSizeAndUnit() {
      this.oldSize = this.targetBlock.size.split(' ')[0];
    	this.oldUnit = this.targetBlock.size.split(' ')[1];
    }
  },
}
</script>
<style scoped>
  .submit-btn {
    width: 70px;
  }
  ::v-deep.ant-modal-body {
    padding-bottom: 0;
  }
</style>